<!DOCTYPE html>
<html lang="en" xmlns:th="http:///www.thylemeaf.org">
<head>
    <meta charset="utf-8"/>
    <title>我的收藏</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link href="css/shopcart.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="css/indexCss.css">

    <style>

        #container img{
            width: 50px;
            height: 50px;
            background-color: red;
        }

        a:hover{text-decoration: none;}

        #container a{
            color: #0C0C0C;
        }


    </style>



    <script type="text/javascript">

        function enter(id,num){
            if(num==1){
                window.location.href = "ShowShopping.html?id="+id;
            }else{
                window.location.href = "ShowSmart.html?id="+id;
            }
        }

        function delete_(id,num){
            var url = "";
            if(num==1){
                url = "collect/deleteAnnounce";
            }else if(num == 2){
                url = "collect/deleteSmart";
            }
            $.ajax({
                url:url,
                contentType: "application/json;charset=UTF-8",
                data:JSON.stringify(id),
                dataType: "json",
                type: "post",
                success:function(data){
                    if(data==1)
                        render();
                }
            })
        }

        $(function () {

            $("#dis1")[0].style.display = "none";
            $("#dis2")[0].style.display = "none";


            //点击复选框全选或全不选
            $("#allCheckBox").click(function () {
                if ($("#allCheckBox").is(":checked"))
                    $('input[name="cartCheckBox"]').prop("checked", true);
                else
                    $('input[name="cartCheckBox"]').prop("checked", false);
            })

            render();

            $("#selectDelete").click(function(){
                $.each($("#container :checkbox"),function(){
                    var arr = $(this).val().split("_");
                    delete_(parseInt(arr[0]),parseInt(arr[1]));
                })

            })

            $("#priceAll").click(function(){
                var sum = 0;
                var price;
                $.each($("#container :checkbox"),function(){
                    price = $(this).parent().parent().find("td").eq(3).html();
                    sum += parseInt(price);
                })
                $("#total").html(sum);
            })

        })

        function render(){
            $.ajax({
                url:"collect/findCollectByUserId",
                contentType:"application/json;charset=UTF-8",
                data:"",
                dataType:"json",
                type:"post",
                success: function(data){
                    if(data!=null){
                        $("#container").empty();
                        for(var i = 0;i<data.announce.length;i++) {

                            $("#container").append('     <tr>\n' +
                                '                            <td colspan="7" class="shopInfo">\n' +
                                '                                宝贝：<a href="#">'+data.announce[i].carBrand+'</a>\n' +
                                '                                卖家：<a href="#">'+data.announce[i].userName+'</a>\n' +
                                '                            </td>\n' +
                                '                        </tr>\n' +
                                '                        <tr>\n' +
                                '                            <td class="td_1">\n' +
                                '                                <input type="checkbox" name="cartCheckBox" value="' + data.announce[i].id + '_1">\n' +
                                '                            </td>\n' +
                                '                            <td class="td_2" style="width: 60px;"><img src="' + data.announce[i].imgs[0].path + '" onclick="enter(' + data.announce[i].id + ',1)"/></td>\n' +
                                '                            <td class="td_3">\n' +
                                '                                <a href="#">' + data.announce[i].title + '</a>\n' +
                                '                                <br/> 颜色：' + data.announce[i].colour + '\n' +
                                '                            </td>\n' +
                                '                            <td class="td_5">' + data.announce[i].money + '</td>\n' +
                                '                            <td class="td_8">\n' +
                                '                                <a href="javascript:void(0);" onclick="delete_(' + data.announce[i].id + ',1)">删除</a>\n' +
                                '                            </td>\n' +
                                '                        </tr>');
                        }

                        for(var i = 0;i<data.smart.length;i++) {

                            $("#container").append('     <tr>\n' +
                                '                            <td colspan="7" class="shopInfo">\n' +
                                '                                宝贝：<a href="#">智能汽车</a>\n' +
                                '                                卖家：<a href="#">官方</a>\n' +
                                '                            </td>\n' +
                                '                        </tr>\n' +
                                '                        <tr>\n' +
                                '                            <td class="td_1">\n' +
                                '                                <input type="checkbox" name="cartCheckBox" value="' + data.smart[i].id + '_2">\n' +
                                '                            </td>\n' +
                                '                            <td class="td_2" style="width: 60px;"><img src="' + data.smart[i].imgs[0].path + '" onclick="enter(' + data.smart[i].id + ',2)"/></td>\n' +
                                '                            <td class="td_3">\n' +
                                '                                <a href="#">' + data.smart[i].title + '</a>\n' +
                                '                                <br/> 座位数：' + data.smart[i].num + '\n' +
                                '                            </td>\n' +
                                '                            <td class="td_5">' + data.smart[i].money + '</td>\n' +
                                '                            <td class="td_8">\n' +
                                '                                <a href="javascript:void(0);" onclick="delete_(' + data.smart[i].id + ',2)">删除</a>\n' +
                                '                            </td>\n' +
                                '                        </tr>');
                        }
                    }
                }
            })
        }

    </script>
</head>
<body>

<div th:replace="header::nav"></div>

<div class="container">
    <div class="row">
        <div class="signupedit form-group col-lg-8 col-md-8 col-sm-7 col-xs-6">
            您的位置：<a href="#">首页</a>&gt;<a href="#">我的</a>&gt;我的收藏
        </div>
        <div id="content">
            <form action="" method="post" name="myform">
                <table width="100%" border="0" cellpadding="0" cellspacing="0" id="shopping">

                    <tr>
                        <td class="title_1"><input id="allCheckBox" type="checkbox" value="">全选</td>
                        <td class="title_2" colspan="2">宝贝</td>
                        <td class="title_4">单价</td>
                        <td class="title_7">操作</td>
                    </tr>

                    <tr>
                        <td colspan="7" class="line"></td>
                    </tr>

                    <tbody  id="container"></tbody >

                    <tr>
                        <td colspan="3">
                            <input type="button" class="btn btn-danger" id="selectDelete" value="所选删除"/>
                        </td>
                        <td colspan="4" class="shopend">商品总价：<label id="total" class="btnbuy">0</label>元<br/>
                            <input type="button" class="btn btn-info" id="priceAll" value="查看价格"/>
                        </td>
                    </tr>


                </table>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript" src="./layui/layui.all.js"></script>
</body>
</html>
